<template>
    <div id="sChart"></div>
</template>
<script>
let myChart
export default {
  name:'outbound-line-chart',
  props:['data'],
  data(){
    return {
    }
  },
  mounted(){
    this.drawLine()
  },
  watch:{
    // 切换语言更改图表文本的语言
    '$i18n.locale'(){
      this.drawLine()
    }
  },
  methods:{
    // 出库订单统计折线图

    drawLine(data){
      let chartData = data?data:this.data
      let dateRange = chartData.map(item=>item.date)
      let totalOrder = chartData.map(item=>item.totalorderamount)
      let finishedOrder = chartData.map(item=>item.finishedorderamount)
      // 基于准备好的dom，初始化echarts实例
      if (myChart != null && myChart !== '' && myChart !== undefined){
        myChart.dispose()//销毁
      }
      myChart = this.$echarts.init(document.getElementById('sChart'))
      // 绘制图表
      myChart.setOption({
        title:{
          text:this.$t('m.home.orderstatistics'),
          padding:[20,35],
          textStyle:{
            fontSize:15
          }
        },
        tooltip:{
          trigger:'axis'
        },
        legend:{
          data:[this.$t('m.home.deliveredorders'), this.$t('m.home.orderamount')],
          top:20,
          right:20
        },
        grid:{
          left:'3%',
          right:'4%',
          bottom:'3%',
          containLabel:true
        },
        toolbox:{

        },
        xAxis:{
          type:'category',
          boundaryGap:false,
          data:dateRange
        },
        yAxis:{
          type:'value'
        },
        series:[
          {
            name:this.$t('m.home.deliveredorders'),
            type:'line',
            smooth:true,
            // color:['#0000ff'],
            data:finishedOrder
          },
          {
            name:this.$t('m.home.orderamount'),
            type:'line',
            smooth:true,
            // color:['#5a8417'],
            data:totalOrder
          }
        ]
      })
      window.onresize = function (){
        myChart.resize()
      }
    }
  }

}
</script>